<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo04-属性绑定</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css" rel="stylesheet">
    <style media="screen">
      .active{
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">

      <h1 :title="title">{{message}}</h1>
      <p :class="[class1,class2]">
        this is content
      </p>

    </div>
    <script src="https://cdn.bootcss.com/vue/2.1.3/vue.min.js"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          message: '属性绑定',
          title: 'the new title',
          isActive: true,
          class1: 'lead',
          class2: 'text-danger'
        }
      })
    </script>
  </body>
</html>
